<template>
  <div class="edit_shop">
    <Head title="店铺编辑"/>
    <div class="container">
      <div class="shop_banner">
        <van-swipe indicator-color="white" @change="onChange" :loop=false>
          <van-swipe-item v-for="(item,index) in bannerList" :key="'aa'+index">
            <van-uploader
              :after-read="upBanner"
              accept="image/png, image/jpeg, image/jpg"
              multiple
            >
              <img :src="item" alt>
            </van-uploader>
          </van-swipe-item>
          <van-swipe-item>
            <van-uploader :after-read="upBanner" accept="image/png, image/jpeg, image/jpg" multiple>
              <img src="../../../static/image/shopEdit_bg.png" alt>
            </van-uploader>
          </van-swipe-item>
        </van-swipe>
        <!-- 上传提示 -->
        <div class="banner_title">点击上方图片进行添加/替换，左右滑动查看</div>
      </div>

      <!-- 表单 -->
      <div class="form">
        <div class="form_list">
          <div class="form_list_left">店铺logo</div>
          <div class="form_list_center">
            <van-uploader :after-read="onRead" accept="image/png, image/jpeg, image/jpg" multiple>
              <img :src="shop_logo==''?'../../../static/image/shopEdit_logo.png':shop_logo" alt>
            </van-uploader>
          </div>
          <div class="form_list_right">
            <i class="iconfont iconrightArrow"></i>
          </div>
        </div>
        <div class="form_list">
          <div class="form_list_left">店铺名称</div>
          <div class="form_list_center">
            <input type="text" :value="shopData.store_name" maxlength="10" placeholder="输入10字以内的店铺名称(不可修改)" disabled>
          </div>
          <div class="form_list_right">
            <!-- <span>检测</span> -->
            <i class="iconfont iconsuo"></i>
          </div>
        </div>
        <div class="form_list">
          <div class="form_list_left">联系电话</div>
          <div class="form_list_center">
            <input
              type="number"
              placeholder="输入手机号码"
              oninput="if(value.length>11)value=value.slice(0,11)"
              v-model="phone"
            >
          </div>
          <div class="form_list_right" v-if="phone.length>0" @click="delPhone">
            <i class="iconfont iconLogonClosed"></i>
          </div>
        </div>
        <div class="form_list" @click="showCity_ev">
          <div class="form_list_left">所在区域</div>
          <div class="form_list_center">
            <span v-if="address==''">点击选择城市</span>
            <span v-else>{{address}}</span>
          </div>
          <div class="form_list_right">
            <i class="iconfont iconrightArrow"></i>
          </div>
        </div>
        <!-- <div class="city_show">
          <input type="text" placeholder="请填写详细地址">
        </div> -->
        <!--  -->
        <div class="form_list" @click="showClass_ev" style="border:0">
          <div class="form_list_left">主营类目</div>
          <div class="form_list_center">选择主营业务</div>
          <div class="form_list_right">
            <i class="iconfont iconrightArrow"></i>
          </div>
        </div>
        <div class="city_show">
          <span v-if="classify==''">点击上方选择店铺主营业务</span>
          <span v-else>{{classify}}</span>
        </div>
        <!--  -->
        <div class="form_list" style="border:0">
          <div class="form_list_left">店铺介绍</div>
          <div class="form_list_center">
            <div class="text_number">{{store_desc.length}}/60</div>
          </div>
          <div class="form_list_right"></div>
        </div>
        <div class="text_box">
          <textarea placeholder="请输入店铺介绍" v-model="store_desc" maxlength="60"></textarea>
        </div>
        <!--  -->
      </div>
      <div class="save_box">
        <span>保存</span>
      </div>
      <!-- 表单 end -->
      <van-popup v-model="showCity" position="bottom" :overlay="true">
        <mapCity @saveAddress="saveAddress"/>
      </van-popup>
      <!-- 选择分类 -->
      <van-popup v-model="showClass" position="bottom" :overlay="true">
        <Classify @setClass="setClass"/>
      </van-popup>
      <!-- 不满足开店要求 -->
      <isVip v-if="showDialog" @toPage="toPage" @hdieVip="hdieVip"/>
    </div>
  </div>
</template>

<script>
import Head from "@/components/_head";
import Classify from "./classify";
import isVip from "./isVip";
import mapCity from "./mapCity";
import upFile from "@/assets/js/upFile";
export default {
  data() {
    return {
      showCity: false,
      cityList: [],
      classify: "",
      showClass: false,
      showDialog: false,
      is_vip: 2,
      is_id_card: 2,
      shop_logo: "",
      bannerList: [],
      banner_inds:0,
      shopData:{},
      City_center:[],
      phone:'',
      address:"",
      store_desc:""
    };
  },
  mounted() {
    // 检测是否实名认证或者是vip
    this.check_member();
    // 获取店铺信息
    this.get_store_info();
  },
  methods: {
    // 获取店铺的信息
    get_store_info() {
      this.appJS.ajax(
        "user.get_store_info",
        "post",
        {
          store_id: 9
        },
        res => {
          console.log(res.data)
          this.shopData = res.data.store_info
          this.City_center = [parseFloat(this.shopData.longitude),parseFloat(this.shopData.latitude)]
          this.phone = this.shopData.store_mobile
          this.address = this.shopData.store_address
          this.shop_logo = this.shopData.store_logo
          this.City_center = [this.shopData.longitude,this.shopData.latitude]
          this.bannerList = this.shopData.store_image
          this.store_desc = this.shopData.store_desc
          this.classify=this.shopData.store_main_product_str
        }
      );
    },
    // 检测是否是vip或者实名认证
    check_member() {
      this.appJS.ajax("user.check_member", "post", {}, res => {
        this.is_id_card = res.data.is_id_card;
        this.is_vip = res.data.is_vip;
        if (this.is_id_card == 2 && this.is_vip == 2) {
          this.showDialog = true;
        }
      });
    },
    // 获取地址
    saveAddress(center,address){
      console.log(center)
      this.City_center = center
      console.log(address)
      this.address = address
      this.showCity=false
    },
    // 清除phone
    delPhone(){
      this.phone = ''
    },
    // 隐藏vip
    hdieVip() {
      this.showDialog = false;
    },
    // 选择banner图上传
    upBanner(file) {
      let params = new FormData();
      params.append("image0", file.file);
      params.append("token", this.appJS.userInfo.token);
      params.append("os", this.appJS.config.os);
      upFile.post("user.upload_image", params, res => {
        if(this.banner_inds==this.bannerList.length){
          this.bannerList = this.bannerList.concat(res.data.image);
        }else{
          this.$set(this.bannerList,this.banner_inds,res.data.images)
        }
      });
    },
    onChange(index) {
      this.banner_inds = index
    },
    // 选择图片上传
    onRead(file) {
      let params = new FormData();
      params.append("image0", file.file);
      params.append("token", this.appJS.userInfo.token);
      params.append("os", this.appJS.config.os);
      upFile.post("user.upload_image", params, res => {
        this.shop_logo = res.data.images;
      });
    },
    // 显示城市选择器
    showCity_ev() {
      this.showCity = true;
    },
    // 显示分类选择
    showClass_ev() {
      this.showClass = true;
    },
    // 设置分类
    setClass() {
      this.showClass = false;
    },
    // 前往去认证
    toPage(data) {
      // 0去认证  1开通VIP
      console.log(data);
      this.showDialog = false;
      this.$router.push({ path: "/User" });
    }
  },
  components: {
    Head,
    Classify,
    isVip,
    mapCity
  }
};
</script>

<style  lang='less'>
.edit_shop {
  .van-overlay {
    background: rgba(0, 0, 0, 0.1);
  }
}

.shop_banner {
  height: 50vw;
  width: 100%;
  position: relative;
  .van-swipe {
    height: 100%;
    .van-uploader {
      height: 100%;
      width: 100%;
    }

    .van-swipe__indicators {
      right: 0;
      z-index: 99;
      left: auto;
      bottom: 1.1rem;
    }
  }
  .banner_title {
    height: 3rem;
    width: 100%;
    padding: 0 0.5rem;
    color: #fff;
    font-size: 0.6rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    .ccolor_top(rgba(208, 208, 208, 0.5), rgb(102, 102, 102, 0.5));
  }
}
.form {
  .form_list {
    height: 3.5rem;
    width: 100%;
    padding: 0 0.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #888;
    background: #fff;
    border-bottom: 1px solid #efefef;
    flex-wrap: wrap;
    &:last-child {
      border: 0;
    }
    .form_list_left {
      height: 100%;
      width: 20%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.8rem;
    }
    .form_list_center {
      width: 60%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 100%;
      font-size: 0.7rem;
      img {
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 100px;
      }
      input {
        height: 90%;
        width: 100%;
        font-size: 0.7rem;
      }
    }
    .form_list_right {
      height: 100%;
      width: 20%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .iconfont {
        font-size: 1.4rem;
      }
      .iconLogonClosed {
        font-size: 1.1rem;
      }
      span {
        font-size: 0.7rem;
        color: @actColor;
        padding: 0.1rem 0.5rem;
        border: 1px solid @actColor;
        border-radius: 4px;
      }
    }
  }
  .city_show {
    min-height: 3rem;
    width: 100%;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: #888;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #efefef;
    input {
      height: 90%;
      width: 95%;
    }
  }
  .text_box {
    height: 20vw;
    padding: 0.5rem;
    background: #fff;
    font-size: 0.8rem;
    color: #888;
    textarea {
      height: 100%;
      width: 100%;
    }
  }
}
.save_box {
  height: 25vw;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    height: 12vw;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    color: #fff;
    border-radius: 100px;
    background: @actColor;
  }
}
</style>
